<template>
	<view class="home">
		<u-toast ref="uToast" />
		<view class="herder">
			<view class="herderTiter">
				<view class="herderImgC">
					<view class="title">
						<view style="font-size: 1.3rem;">房千千</view>
						<view style="font-size: 1rem; margin-left: 1vh; color: #ffffffb8;">有房即可申请</view>
					</view>
					<image src="@/static/fqq-img/bg2.png" mode="aspectFill"></image>
					<view class="fild-body">
						<view style="margin-top: 1.7rem; padding-top: .7rem;">最高可借额度(元)</view>
						<view style="margin: 0.5rem;font-size: 3rem; font-weight: 600;">1,000,000</view>
						<view class="submit">
							<view class="step">
								<view class="step-title-box alltop">
									<view class="step-title">
										<image class="step-title-img" src="@/static/fqq-img/4.jpg" mode="aspectFill">
										</image>
										<!-- <view class="step-title-img" style="background-image: url(@/static/fqq-img/4.jpg);"> -->
										<!-- </view> -->
										<view class="step-title-text">申请流程</view>
										<image class="step-title-img" src="@/static/fqq-img/5.png" mode="aspectFill">
										</image>

									</view>
								</view>
								<view class="step-box">
									<view class="step-item">

										<image class="arrowhead" src="@/static/fqq-img/6.png" mode="aspectFill"></image>
										<!-- <view class="arrowhead" style="background-image: url(@/static/fqq-img/6.png);"> -->
										<!-- </view>                      -->
										<view class="item-title">第一步</view>
										<view class="item-txt">点击申请</view>
									</view>
									<view class="step-item">
										<image class="arrowhead" style="height: 3vh;" src="@/static/fqq-img/7.png"
											mode="aspectFill"></image>
										<!-- 	<view class="arrowhead" style="background-image: url(@/static/fqq-img/7.png);">
										</view> -->
									</view>
									<view class="step-item">
										<image class="arrowhead" src="@/static/fqq-img/8.png" mode="aspectFill"></image>
										<view class="item-title">第二步</view>
										<view class="item-txt">匹配.审批</view>
									</view>
									<view class="step-item">
										<image class="arrowhead" src="@/static/fqq-img/9.png" style="height: 3vh;"
											mode="aspectFill"></image>
										<!-- 	<view class="arrowhead" style="background-image: url(@/static/fqq-img/9.png);">
										</view> -->
									</view>
									<view class="step-item">
										<image class="arrowhead" src="@/static/fqq-img/10.png" mode="aspectFill">
										</image>
										<!-- <view class="arrowhead" style="background-image: url(@/static/fqq-img/10.png);">

										</view> -->
										<view class="item-title">第三步</view>
										<view class="item-txt">过审.放款</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="margin-top: 80px;">
						<button class="subimt-but" @click="submitEvent()">立即申请</button>
					</view>
					<view class="step-bottom">

						<view class="step-bottom-box">
							<view class="step-bottom-title">
								<image style="height: 8px; width: 4.6rem;" src="@/static/fqq-img/4.jpg"
									mode="aspectFill"></image>
								<view class="step-title-text">选择我们的四大理由</view>
								<image style="height: 8px; width: 4.6rem;" src="@/static/fqq-img/5.png"
									mode="aspectFill"></image>
							</view>
						</view>
						<view class="account-box">
							<view class="account">
								<image class="account-img" src="@/static/fqq-img/icon5.png" mode="aspectFill"></image>
								<view class="item-title">智能提额</view>
								<view class="item-txt">提交个人资料发起提额</view>
							</view>
							<view class="account">
								<image class="account-img" src="@/static/fqq-img/icon6.png" mode="aspectFill"></image>
								<view class="item-title">安全保障</view>
								<view class="item-txt">个人信息多重加密</view>
							</view>
							<view class="account">
								<image class="account-img" src="@/static/fqq-img/icon7.png" mode="aspectFill"></image>
								<view class="item-title">期限灵活</view>
								<view class="item-txt">支持1-36期，视情况自选</view>
							</view>
							<view class="account">
								<image class="account-img" src="@/static/fqq-img/icon8.png" mode="aspectFill"></image>
								<view class="item-title">放心贷</view>
								<view class="item-txt">服务更放心</view>
							</view>
						</view>
					</view>
					<view style="height: 33vh; margin-top: 3vh; text-align: center;">
						<view>实际服务方：房千千房地产评估(湖北)有限公司</view>
						<view>本交易由房千千房地产评估(湖北)有限公司提供担保服务 </view>
						<view style="margin-top: 1vh; color: #616161;">
							贷款有风险、借款需谨慎<br />
							贷款额度、放款时间以实际审批结果为准<br />
							年化综合息费率(单利)3.85%-24%(以资金方审批结果为准)<br />
							公积金相关资料仅作为贷款服务验资证明<br />
							放贷路径与公积金账户无关<br />
							请根据个人能力合理贷款、理性消费、避免逾期<br />
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="u-demo-block__content" style="margin:10upx 20upx 20upx; background-color: #fefbec;">
		</view>
	</view>
</template>

<script>
import {
	mapMutations,
	mapState
} from 'vuex'


const innerAudioContext = uni.createInnerAudioContext();
import {
	getAuditNews,
	// userIsBook,
	getCount,
	getHtmlPlus,
	getUserInfo
} from "@/api/api.js"

export default {
	data() {
		return {
			content: '笔芯速查需要访问你的通讯录权限，请前往设置开通此权限',
			id: 1,
			number: '',
			newsNum: 0,
			// setIntervalSet: null
		}
	},
	computed: {
		...mapState(['userinfo'])
	},
	onLaunch() { },
	// 开启监听
	onLoad() {
		var system = uni.getSystemInfoSync();
		console.log("systemsystem", system)
		innerAudioContext.autoplay = true;
		uni.$on('message', this.getMessage)
	},
	// 页面卸载时取消监听
	// onUnload() {
	// 	uni.$off('message', this.getMessage)
	// 	removeWebsocket()
	// },
	onShow() {
		// this.userIsBook() // 获取通讯录
		// this.getUserInfoData(); // 获取用户信息

		// this.versionUpdate()
		// #ifdef APP-PLUS
		this.versionUpdate()
		let system = uni.getSystemInfoSync(); // 获取系统信息
		if (system.platform == 'android') { // 判断平台
			var g_wakelock = null
			var main = plus.android.runtimeMainActivity();
			var Context = plus.android.importClass("android.content.Context");
			var PowerManager = plus.android.importClass("android.os.PowerManager");
			var pm = main.getSystemService(Context.POWER_SERVICE);
			g_wakelock = pm.newWakeLock(PowerManager.PARTIAL_WAKE_LOCK, "ANY_NAME");
			g_wakelock.acquire();
		}
		// clearInterval(this.setIntervalSet)
		// this.setIntervalSet = setInterval(()=>{
		// 	this.newsNum = this.newsNum + 1
		//     plus.runtime.setBadgeNumber(Number(this.newsNum));
		// 	innerAudioContext.src = y1115;
		// 	innerAudioContext.play();
		// },1500)
		//#endif
		// #ifdef MP-WEIXIN
		if (wx.canIUse('getUpdateManager')) {
			const updateManager = wx.getUpdateManager()
			updateManager.onCheckForUpdate(function (res) {
				if (res.hasUpdate) {
					updateManager.onUpdateReady(function () {
						wx.showModal({
							title: '更新提示',
							content: '新版本已经准备好，是否重启应用？',
							success: function (res) {
								if (res.confirm) {
									updateManager.applyUpdate()
								}
							}
						})
					})
					updateManager.onUpdateFailed(function () {
						wx.showModal({
							title: '已经有新版本了哟~',
							content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'
						})
					})
				}
			})
		} else {
			wx.showModal({
				title: '提示',
				content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
			})
		}
		// #endif
	},
	mounted() {

	},
	onPullDownRefresh() {
		// this.getAuditNews()
		// this.infox()
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		// console.log('refresh');
		setTimeout(function () {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	methods: {

		submitEvent() {
			// 获取缓存信息
			const phone = uni.getStorageSync('phone')
			if (phone == '') {
				uni.$u.toast('请先登录')
				uni.navigateTo({
					url: '/pages/login/index'
				})
			} else {
				uni.navigateTo({
					url: '/pages/form/fqq-form'
				})
			}

		},
		...mapMutations(['set_userinfo']),
		// 接收到消息的回调
		getMessage(res) {
			console.log('接收到消息的回调', res)
			if (res.data != 'conn_success') {
				this.newsNum = this.newsNum + 1
				uni.setTabBarBadge({
					index: 1,
					text: this.newsNum + ''
				})
				// #ifdef APP-PLUS
				// 设置数字
				plus.runtime.setBadgeNumber(Number(this.newsNum));
				innerAudioContext.play();
				// #endif

			}
		},
		// 获取用户
		// getUserInfoData() {
		// 	getUserInfo().then(res => {
		// 		if (res.code == 200) {
		// 			let data = JSON.parse(JSON.stringify(res.data || {}))
		// 			if (getToken()) {
		// 				console.log(2222, [0, 2].indexOf(data.user && data.user.isApproval || 3) > -1)
		// 				data.isLoans = true
		// 				this.set_userinfo(data)
		// 				if ([0, 2].indexOf(data.user && data.user.isApproval || 3) > -1) {
		// 					setTimeout(res => {
		// 						console.log(333)
		// 						let url =
		// 							`ws://app.nmkj.xyz:8006/imserver/${this.userinfo.user && this.userinfo.user.city}/${this.userinfo.user && this.userinfo.user.id}`
		// 						console.log('url', url)
		// 						connectSocketInit(url)
		// 					})
		// 				} else {
		// 					this.$refs.uToast.show({
		// 						title: '您还未实名认证~',
		// 						type: 'error',
		// 					})
		// 				}
		// 			} else {
		// 				this.$refs.uToast.show({
		// 					title: '没有获取到用户信息！',
		// 					type: 'primary',
		// 				})
		// 				// setTimeout(res=>{
		// 				//     uni.navigateTo({
		// 				//         url:'/pages/logo/logo'
		// 				//     })
		// 				// })
		// 			}
		// 		} else {
		// 			this.$refs.uToast.show({
		// 				title: '没有获取到用户信息！',
		// 				type: 'primary',
		// 			})
		// 			// setTimeout(res=>{
		// 			//     uni.navigateTo({
		// 			//         url:'/pages/logo/logo'
		// 			//     })
		// 			// })
		// 		}
		// 	})
		// },

		// 我的线索
		toMyList() {
			uni.navigateTo({
				url: '/pages/clue/myClue'
			})
		},
		// 话术
		async getHtml(id) {
			if (this.userinfo.hasLogin == false) {
				this.$refs.uToast.show({
					title: '亲，你还没有登录o~',
					type: 'primary',
				})
				return
			}
			uni.navigateTo({
				url: '/subPackages/index/cpxq?itemId=' + id
			})
		},
		// 风险
		getRisk() {
			if (this.userinfo.hasLogin == false) {
				this.$refs.uToast.show({
					title: '亲，你还没有登录o~',
					type: 'primary',
				})
				return
			}
			let url = "https://m.tianxiaxinyong.com/zxbg.html";
			uni.navigateTo({
				url: '/subPackages/tabbar/url?url=' + url
			})
		},
		// 征信
		getRiskAddress() {
			if (this.userinfo.hasLogin == false) {
				this.$refs.uToast.show({
					title: '亲，你还没有登录o~',
					type: 'primary',
				})
				return
			}
			let url = "https://zxcd.gdthrd.com/privacy/index.html";
			uni.navigateTo({
				url: '/subPackages/tabbar/url?url=' + url
			})
		},
		// 消息
		informationx() {
			if (this.userinfo.hasLogin == false) {
				this.$refs.uToast.show({
					title: '亲，你还没有登录o~',
					type: 'primary',
				})
				return
			}
			uni.navigateTo({
				url: '/subPackages/index/information'
			})
		},
		// 消息数量
		async getCount() {
			let res = await getCount()
			if (res) {
				this.number = res.data
			}
		},
		//获取用户通讯录
		// async userIsBook() {
		//     let res = await userIsBook()
		//     if (res) {
		//         if (res.data == false) {
		//             this.book()
		//         } else {
		//             uni.showTabBar()
		//         }
		//     }
		// }
	}
}
</script>

<style lang="scss" scoped>
.u-demo-block__content {
	.u-row {
		.u-col:nth-child(1) {
			border-right: 2upx solid white;
			border-bottom: 2upx solid white;
		}

		.u-col:nth-child(2) {
			border-left: 2upx solid white;
			border-bottom: 2upx solid white;
		}

		.u-col:nth-child(3) {
			border-right: 2upx solid white;
			border-top: 2upx solid white;
		}

		.u-col:nth-child(4) {
			border-left: 2upx solid white;
			border-top: 2upx solid white;
		}

		.u-col:nth-child(5) {
			border-right: 4upx solid white;
			border-top: 4upx solid white;
		}

		.bg-purple-light {
			height: 180upx;
			margin: 0;
			padding: 0;
		}

		.item {
			display: flex;
			padding: 20rpx;
		}

		image {
			width: 120rpx;
			flex: 0 0 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			border-radius: 12rpx;
		}

		.title {
			text-align: left;
			font-size: 28rpx;
			color: $u-content-color;
			margin-top: 20rpx;
		}

	}
}

.wrap {
	padding: 12px;
}

.demo-layout {
	height: 25px;
	border-radius: 4px;
}

.bg-purple {
	background: #CED7E1;
}

.bg-purple-light {
	// background: #e5e9f2;
}

.bg-purple-dark {
	background: #99a9bf;
}

span {
	left: 30rpx;

	text-align: center;
	line-height: 40rpx;
	color: #FFFFFF;
	font-size: 20rpx;
	background-color: red;
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	position: absolute;
}

.refuse {
	width: 563rpx;
	height: 396rpx;

	image {
		width: 152rpx;
		height: 152rpx;
		border-radius: 50%;
		margin-top: 80rpx;
	}

	text {
		margin-top: 35rpx;
		font-size: 32rpx;
		color: #333333;
	}
}

button {
	margin-top: 35rpx;
	width: 192rpx;
	height: 59rpx;
	background-color: #419dff;
	border-radius: 10rpx;
	color: #FFFFFF;
	font-size: 30rpx;
	line-height: 59rpx;

}

.shpass {
	width: 563rpx;
	padding-bottom: 30rpx;
	// height: 477rpx;
	background-color: #ffffff;
	border-radius: 10rpx;

	.tex1 {
		font-size: 32rpx;
		color: #333333;
	}

	.tex2 {
		display: block;
		width: 250rpx;
		margin-left: 60rpx;
		font-size: 32rpx;
		color: #9e9e9e;
	}
}

.cent {
	position: absolute;
	top: 40rpx;
	left: 40rpx;

	image {
		width: 30rpx;
		height: 80rpx;
	}

	text {
		color: #FFFFFF;
	}
}

.circleProgress_wrapper {
	width: 200rpx;
	height: 200rpx;
	margin: auto;

	position: relative;

}

.wrapper {
	width: 100rpx;
	height: 200rpx;
	position: absolute;
	top: 0;
	overflow: hidden;
}

.right {
	right: 0;
}

.left {
	left: 0;
}

.circleProgress {
	width: 160rpx;
	height: 160rpx;
	border: 20rpx solid #7cd1ff;
	border-radius: 50%;
	position: absolute;
	top: 0;
	-webkit-transform: rotate(45deg);
}

.rightcircle {
	border-top: 20rpx solid #7cd1ff;
	border-right: 20rpx solid #7cd1ff;
	right: 0;
	-webkit-animation: circleProgressLoad_right 5s linear infinite;
}

.leftcircle {
	border-bottom: 20rpx solid #7cd1ff;
	border-left: 20rpx solid #7cd1ff;
	left: 0;
	-webkit-animation: circleProgressLoad_left 5s linear infinite;
}

@-webkit-keyframes circleProgressLoad_right {
	0% {
		border-top: 20rpx solid #FFFFFF;
		border-right: 20rpx solid #7cd1ff;
		-webkit-transform: rotate(45deg);
	}

	50% {
		border-top: 20rpx solid #a0c7f6;
		border-right: 20rpx solid #a0c7f6;
		border-left: 20rpx solid #a0c7f6;
		border-bottom: 20rpx solid #a0c7f6;
		-webkit-transform: rotate(225deg);
	}

	100% {
		border-left: 20rpx solid #a0c7f6;
		border-bottom: 20rpx solid #a0c7f6;
		-webkit-transform: rotate(225deg);
	}
}

@-webkit-keyframes circleProgressLoad_left {
	0% {
		border-bottom: 20rpx solid #7cd1ff;
		border-left: 20rpx solid #7cd1ff;
		-webkit-transform: rotate(45deg);
	}

	50% {
		border-bottom: 20rpx solid #FFFFFF;
		border-left: 20rpx solid #a0c7f6;
		border-top: 20rpx solid #a0c7f6;
		border-right: 20rpx solid #a0c7f6;
		-webkit-transform: rotate(45deg);
	}

	100% {
		border-top: 20rpx solid #a0c7f6;
		border-right: 20rpx solid #a0c7f6;
		border-bottom: 20rpx solid #a0c7f6;
		border-left: 20rpx solid #a0c7f6;
		-webkit-transform: rotate(225deg);
	}
}

.box {
	margin-left: 113rpx;
	margin-top: 20rpx;
	width: 172rpx;
	height: 137rpx;
	background-image: linear-gradient(#dbecff,
			#dbecff),
		linear-gradient(#faedc6,
			#faedc6);
	box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(52, 51, 51, 0.22);
	border-radius: 10rpx;

	image {
		width: 100rpx;
		height: 100rpx;
	}

	text {

		color: #fcae19;
		font-size: 28rpx;
	}
}

.information {
	position: relative;
	position: fixed;
	right: 45rpx;
	top: 64rpx;

	image {
		width: 50rpx;
		height: 50rpx;
	}
}

.herder {
	width: 100%;
	// height: 620rpx;

	.herderTiter {
		// background-color: blue;
		color: #000;
		height: 24vh;

		.city {
			font-size: 28rpx;
			padding-top: 62rpx;
			position: fixed;
			left: 20upx;
			display: flex;
			justify-content: center;
			align-items: flex-end;
		}


	}

	.herderImgC {
		// margin-top: 10rpx;
		height: 100%;
		width: 100%;
		position: relative;

		image {
			border-radius: 10rpx;
			width: 100%;
			height: 100%;
		}

		.title {

			// font-size: 20px;
			text-align: center;
			/* padding-top: 28px; */
			position: absolute;
			top: 2.55rem;
			z-index: 1;
			left: 10px;
			color: aliceblue;
			display: flex;
		}
	}

	.fild-body {
		// border: 1px solid red;
		width: 96%;
		height: 260px;
		margin-top: -15vh;
		position: relative;
		left: 2%;
		background-color: #fdfdff;
		border-radius: 10rpx;
		text-align: center;
	}

	.submit {
		width: 100%;
		// height: 18vh;
		background: linear-gradient(to top, #ffffff, #feecdfed);
		/* 浅蓝色渐变 */
		border-radius: 10rpx;
		margin-top: 1rem;

		.step {
			box-sizing: border-box;
			border-radius: 8px;
			width: 96%;
			height: 17vh;
			margin-left: 2%;
		}

		.alltop {
			margin-bottom: 20px;
		}

		.step-title-box {
			padding-top: 1.5rem;
			color: #333;
		}

		.step-title {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.step-title-img {
			background-position: 0% 0%;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 20vw;
			height: 1vh;
		}

		.step-title-text {
			font-size: 15px;
			font-weight: 600;
			padding: 0 8px;
		}

		.step-box {
			display: flex;
			justify-content: space-evenly;
		}

		.step-item {
			text-align: center;
		}

		.arrowhead {
			width: 4vh;
			height: 4vh;
			background-position: 0% 0%;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			display: inline-block;
			overflow: hidden;
			position: relative;
		}
	}

	.subimt-but {
		width: 88%;
		height: 45px;
		line-height: 45px;
		background-color: #4b57fd;
	}

	//      .herderImg {
	//          padding: 20rpx;
	//          display: flex;
	//          height: 460rpx;
	// margin-top: 10rpx;

	//      }

	.hint {
		width: 100%;
		background-color: #b2d7ff;
		height: 80rpx;
		margin-top: 20rpx;
	}

	p {
		font-size: 50rpx;
		color: #ffffff;
		letter-spacing: 8rpx;
		margin-left: 48rpx;
		margin-top: 50rpx;
	}
}

.centerline {
	width: 720rpx;
	padding-bottom: 60rpx;
	// height: 578rpx;
	background-color: #ffffff;
	box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(52, 51, 51, 0.22);
	border-radius: 20rpx;
	margin: -130rpx auto;

	.p {
		margin-top: 30rpx;
		color: #000000;
		font-weight: bold;
		font-size: 44rpx;
	}

	.p1 {
		margin-top: 30rpx;
		font-size: 28rpx;
		color: #9d9d9d;
	}

	.p2 {
		margin-top: 20rpx;
		color: #000000;
		font-weight: bold;
		font-size: 60rpx;
	}

	.p3 {
		margin-top: 20rpx;
		color: #fcb60c;
		font-size: 28rpx;
	}
}

.btn {
	width: 100%;
	margin-top: 30rpx;

	.btns {
		width: 172rpx;
		height: 51rpx;
		background-color: #eeeeee;
		border-radius: 10rpx;
		line-height: 51rpx;
		color: #7c7c7c;
		font-size: 24rpx;
		text-align: center;
	}
}

.custom-style {
	width: 578rpx;
	height: 73rpx;
	background-image: linear-gradient(93deg,
			#57a8ff 0%,
			#4ba2ff 100%);
	box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(52, 51, 51, 0.22);
	border-radius: 37rpx;
	color: #ffffff;
	font-size: 30rpx;
	line-height: 73rpx;
	text-align: center;
	margin-top: 20rpx;
}

.step-bottom {
	// position: absolute;
	top: 56vh;
	margin: 1.2vh;
	padding: 24px 0;
	background: #fff;
	border-radius: 8px;
	padding: 24px 35px;
	width: 95%;
	// height: 39vh;
	box-sizing: border-box;
	border: 1px solid #e8e6e6;
}

.step-bottom-title {
	display: flex;
	align-items: center;
	justify-content: center;
}

.step-bottom-img {
	width: 47px;
	height: 5px;
	background-position: 0% 0%;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.account-box {
	flex-wrap: wrap;
	text-align: center;
	display: flex;
	justify-content: space-between;
}

.account {
	width: 50%;
	margin-top: 20px;
}

.account .item-txt {
	width: 40vw;
}

.account-img {
	width: 40px !important;
	height: 40px !important;
	display: inline-block;
	overflow: hidden;
	position: relative;

	background-position: 0% 0%;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
</style>
